<template>
  <v-card height="100vh">
    <v-form v-model="valid" ref="form">
      <v-container>
        <v-row>
          <v-col cols="12" md="4">
            <v-text-field
              v-model="person.firstname"
              :counter="10"
              label="姓"
              required
            ></v-text-field>
          </v-col>

          <v-col cols="12" md="4">
            <v-text-field
              v-model="person.lastname"
              :counter="10"
              label="名字"
              required
            ></v-text-field>
          </v-col>

          <v-col cols="12" md="4">
            <v-text-field
              v-model="person.email"
              label="电子邮箱"
              required
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" md="4">
            <v-menu
              v-model="menu1"
              :close-on-content-click="false"
              max-width="290"
            >
              <template v-slot:activator="{ on, attrs }">
                <v-text-field
                  :value="computedDateFormattedMomentjs"
                  clearable
                  label="出生日期"
                  readonly
                  v-bind="attrs"
                  v-on="on"
                  @click:clear="date = null"
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="person.birthday"
                @change="menu1 = false"
              ></v-date-picker>
            </v-menu>
          </v-col>
          <v-col cols="12" md="4"> </v-col>
          <v-col cols="12" md="4"> </v-col>
        </v-row>
        <v-row>
          <v-col md="6" class="left-item">
            <v-btn depressed color="primary" @click="sumb()"> 提交 </v-btn>
          </v-col>
          <v-col md="6" class="right-item">
            <v-btn depressed color="primary" @click="reset()"> 重置 </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
    <v-row>
      <v-col md="4">
        {{ firstnameValue }}
      </v-col>
      <v-col md="4">
        {{ lastnameValue }}
      </v-col>
      <v-col md="4">
        {{ emailValue }}
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      valid: true,
      date: "",
      person: {
        firstname: "",
        lastname: "",
        email: "",
        birthday: "",
      },
      firstnameValue: "",
      lastnameValue: "",
      emailValue: "",
      menu1: false,
    };
  },
  computed: {
    computedDateFormattedMomentjs() {
      return this.person.birthday ? this.person.birthday : "";
    },
  },

  methods: {
    sumb() {
      // this.firstnameValue = this.person.firstname;
      // this.lastnameValue = this.person.lastname;
      // this.emailValue = this.person.email;
      console.log(this.person);
    },
    reset() {
      this.$refs.form.reset();
    },
  },
};
</script>

<style>
.left-item {
  text-align: right;
}
.right-item {
  text-align: left;
}
</style>